{include file="common/header" /}
<link rel="stylesheet" href="__LAYUIMINI__/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<style>
    body {
        background-color: #ffffff;
    }
</style>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>节点添加</legend>
</fieldset>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">父节点</label>
        <div class="layui-input-block">
            
            <select name="pid" lay-verify="required" lay-search="">
              <option value="0">管理后台</option>
              
              {volist name='tree' id='vo'}
                <option value="{$vo.id}" {if $pid == $vo.id /} selected="" {/if}> {$vo.str | raw} {$vo.name}</option>
                
            {/volist}
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">节点名称</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="name"  value="" autocomplete="off" placeholder="请输入节点名称">
        </div>
    </div>


    <div class="layui-form-item">
        <label for="" class="layui-form-label">图标</label>

        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="icon" name="icon" autocomplete="off" readonly="" placeholder="请输入默认图标">
        </div>
        <div class="layui-input-inline" style="width: 300px;">
            <input type="text" id="iconPicker" lay-filter="iconPicker" class="hide">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否显示</label>
        <div class="layui-input-block">
          <input type="radio" name="show" value="1" title="在菜单栏显示" checked="">
          <input type="radio" name="show" value="2" title="不在菜单栏显示">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label ">排序</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="sort" value="100" autocomplete="off" placeholder="">
        </div>
    </div>
    

    <div class="layui-form-item">
        <label class="layui-form-label ">节点跳转</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" id="href" name="href" autocomplete="off"  placeholder="请在选择权限码中生成">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选择权限码</label>
        <div class="layui-input-inline">
            <select id="get_act_list" lay-search="" lay-filter="get_act_list" >
              <option value="">选择权限码</option>
              {volist name="$planList" id="vo"}
              <option value="{$vo}">{$vo}</option>
              {/volist}
            </select>
        </div>
        <div class="layui-form-mid layui-word-aux">@</div>
    </div>

    <div class="layui-form-item" id="act_list" style="display: none;">
        <label class="layui-form-label">&nbsp;</label>
        <div class="layui-input-inline">
            <ul class="ncap-account-container-list"></ul>
        </div>
    </div>

    <div class="layui-form-item">
        <label for="" class="layui-form-label">权限码</label>
        
        <div class="layui-input-block" id="choose_act_list" >
            
                
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="act" value="add">
            <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>


<script>
    layui.use(['form','iconPickerFa'], function () {
        var form = layui.form,
            iconPickerFa = layui.iconPickerFa,
            layer = layui.layer,
            $ = layui.$;

        iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // fa 图标接口
            url: "__LAYUIMINI__/lib/font-awesome-4.7.0/less/variables.less",
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 40,
            // 点击回调
            click: function (data) {
                // console.log(data);
                $("#icon").val(data.icon);
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });
        // iconPickerFa.checkIcon('iconPicker', 'fa-align-right');
        

        form.on('select(get_act_list)', function (data) {
            var controller = data.value;

            $.ajax({
                url: "{:url('system/ajax_get_action')}",
                type:'get',
                data: {'controller':controller},
                dataType:'html',
                success:function(res){
                    $('.ncap-account-container-list').empty().append(res);
                    $("#act_list").show();
                    form.render();
                    // chkbox_bind();
                    // updateActCheck();
                }
            });
        });


        form.on('checkbox(choose_act)', function (data) {
            var checked = data.elem.checked;
            var value = data.value;
            var get_act_list = $("#get_act_list").val();

            var row_id = get_act_list + '_' + value;
            var act_value = get_act_list + '@' + value;

            if(checked){
                var html = '';
                html += '<div id="'+row_id+'" class="layui-form-item">'+
                    '<div class="layui-input-inline">'+
                        '<input type="text" class="layui-input" name="right[]" value="'+act_value+'" autocomplete="off" >'+
                    '</div>'+
                    '<div class="layui-form-mid layui-word-aux">'+
                        '<a href="javascript:;" onclick="delAct(this)" >删除</a>'+
                    '</div>'+
                '</div>';

                $("#choose_act_list").append(html);
            }else{
                $("#"+row_id).remove();
            }
            form.render();
        });

        // delAct
        window.delAct = function(obj){
            $(obj).parent().parent().remove();
        };

        window.dataHref = function(obj){
            $("#href").val(obj);
        };


        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.load(1, {
                shade: [0.3,'#000'] //0.1透明度的白色背景
            });
            var data = data.field;
            $.ajax({
                url:"{:url('System/right_add')}",
                data:data,
                type:'post',
                dataType:'json',
                success:function(res){
                    // console.log(res)
                    // return false
                    if(res.errcode != 1){
                        layer.msg(res.message,{icon: 2,time: 2000},function(){
                            layer.close(index);
                        })
                    }else{
                        layer.msg(res.message,{icon: 1,time: 1000},function () {
                            layer.close(index);
                            var parent_index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            parent.layer.close(parent_index);  // 关闭layer
                            // window.location.href = res.dyurl;
                            parent.location.reload();
                        })
                    }
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('网络失败，请刷新页面后重试!',{icon: 2,time: 2000})
                }
            });

            return false;
        });

    });
</script>
</body>
</html>